<template>
  <div>
    <div class="navbar_tab">
      <div class="navbar_tab-left" @click="$emit('click-left')">
        <!-- 默认状态 -->
        <van-icon
          v-if="ShowBack"
          class="navbar_tab-left-arror"
          name="arrow-left"
        />
        <!-- 具名插槽 -->
        <slot name="nav-left"></slot>
      </div>
      <div class="navbar_tab-center">
        <span
          class="navbar_tab-nav-center"
          v-for="(item, index) in navTab"
          :key="item"
        >
          <span
            ref="item"
            class="titleClass"
            @click="titleClick(item, index)"
            >{{ item.title }}</span
          >
        </span>
        <span
          class="navbar_tab-center-overlay"
          :style="{
            left: overlay_left - 5 + 'px',
            width: overlay_width + 10 + 'px',
          }"
        ></span>
      </div>
      <div class="navbar_tab-right">
        <slot name="nav-right"></slot>
      </div>
    </div>
    <transition >
      <div v-for="(item, index) in navTab" :key="index">
        <!-- <slot :name="item.title"></slot> -->
        {{item.title}}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    ShowBack: {
      type: Boolean,
      default: true,
    },
    value: {
      type: Number,
      default: 0,
    },
    navTab: {
      type: Array,
    },
  },
  data: function () {
    return {
      titleClass: "default",
      overlay_left: 0,
      overlay_width: 0,
    };
  },
  watch: {
    value(value) {},
  },
  mounted() {
    this.changeCss(this.value);
  },
  methods: {
    titleClick(item, index) {
      // this.$refs[id].style.color='#ffffff'
      this.changeCss(index);

      this.$emit("input", index);
    },
    changeCss(res) {
      var _this = this;
      for (let i = 0; i < this.$refs.item.length; i++) {
        if (i === res) {
          this.$refs.item[i].style.color = "black";
        } else {
          //默认设置
          this.$refs.item[i].style.color = "#606266";
        }
      }
      var refresh = setInterval(function () {
        _this.changeOverlay(res);
      }, 300);
      setTimeout(function () {
        clearInterval(refresh);
        // _this.changeOverlay(res);
      }, 1000);
    },
    changeOverlay(res) {
      var position = this.$refs.item[res].getBoundingClientRect();
      this.overlay_left = position.left;
      this.overlay_width = position.width;
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar_tab {
  position: relative;
  z-index: 1;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
  &-left {
    left: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    cursor: pointer;
    &-arror {
      margin: auto;
    }
  }
  &-center {
    // position: relative;
    // margin: auto;
    max-width: 60%;
    margin: 0 auto;
    &-overlay {
      z-index: -1;
      position: absolute;
      margin-top: 30px;
      height: 6px;
      width: 33.3%;
      //   background-color: #29bdd9;
      background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
      border-radius: 10px 10px 10px 10px;
      transition: 0.3s;
    }
  }
  &-right {
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    cursor: pointer;
  }
}
.titleClass {
  color: #606266;
  margin: 12px;
  font-size: 18px;
  transition: 0.3s;
}
</style>